<template>
  <!-- 推荐歌单 -->
  <div class="recommend">
    <div class="top">
      <span class="topLeft">发现好歌单</span>
      <span class="topRight">查看更多</span>
    </div>
    <div class="bottom">
      <div class="swiper-wrapper">
        <router-link
          :to="{path:'/playlist',query:{id:item.id}}"
          class="swiper-slide"
          v-for="item in musicList"
          :key="item.id"
        >
          <img :src="item.picUrl" alt />
          <div class="name">{{item.name}}</div>
          <div class="count">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-bofang" />
            </svg>
            {{playCount(item.playCount)}}
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>
<script>
import { getReommend, getRecord } from "@/api/index.js";
// import { reactive, onMounted, onUpdated } from "vue";
import store from "@/store/index.js";

// vue3写法
// export default {
//   setup() {
//     let state = reactive({ musicList: [] });
//     function playCount(count) {
//       let res = 0;
//       if (count >= 100000000) {
//         res = count / 100000000;
//         res = res.toFixed(2) + "亿";
//       } else if (count >= 10000) {
//         res = count / 10000;
//         res = res.toFixed(2) + "万";
//       }
//       return res;
//     }
//     onMounted(async () => {
//       let res = await getReommend();
//       state.musicList = res.data.result;
//       console.log(state);

//     });

//     onUpdated(() => {
//       var swiper = new Swiper(".swiper-container", {
//         slidesPerView: 3.2,
//         spaceBetween: 10
//       });
//     });
//     return { state, playCount };
//   }
// };

// vue2写法;
export default {
  data() {
    return {
      musicList: []
    };
  },
  methods: {
    playCount(count) {
      let res = 0;
      if (count >= 100000000) {
        res = count / 100000000;
        res = res.toFixed(2) + "亿";
      } else if (count >= 10000) {
        res = count / 10000;
        res = res.toFixed(2) + "万";
      }
      return res;
    }
  },
  async mounted() {
    let res = await getReommend();
    this.musicList = res.data.result;
    console.log(res);
  }
};
</script>
<style scoped lang="less">
.recommend {
  border-bottom: 1px solid #ccc;
  .top {
    width: 7.5rem;
    height: 0.8rem;
    display: flex;
    justify-content: space-between;
    span {
      margin: 0.2rem;
      font-family: "微软雅黑";
    }
    .topLeft {
      font-weight: 900;
      font-size: 0.35rem;
    }
    .topRight {
      font-size: 0.2rem;
      width: 1.2rem;
      height: 0.45rem;
      line-height: 0.45rem;
      text-align: center;
      border: 1px solid #ccc;
      border-radius: 0.3rem;
    }
  }
  .bottom::-webkit-scrollbar {
    width: 0 !important;
  }
  .bottom {
    // margin: 0.2rem 0.2rem;
    display: flex;
    overflow: scroll;
    width: 7.1rem;
    height: auto;
    margin: 0 auto;

    // background-color: #fff;
    .swiper-wrapper {
      .swiper-slide {
        width: 2rem;
        height: auto;
        margin-right: 0.2rem;

        img {
          border-radius: 0.1rem;
          width: 2rem;
          height: auto;
        }
        .name {
          font-size: 0.24rem;

          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .count {
          position: absolute;

          top: 0.05rem;
          right: 0.1rem;
          display: flex;
          align-items: center;
          font-size: 0.2rem;
          color: #ccc;
          .icon {
            fill: #ccc;
          }
        }
      }
    }
  }
}

//  .count {
//           position: absolute;
//           top: 0.1rem;
//           right: 0.2rem;
//           display: flex;
//           align-items: center;
//           font-size: 0.2rem;
//           color: #ccc;
//           .icon {
//             fill: #ccc;
//           }
</style>